<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title></title>
  <script type='text/javascript' src='js/vue.js'></script>
</head>

<body>
  <div id='app'>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" @click="check(item)" v-model="item.checked">
        <span>{{ '品牌 \t' + item.name }}</span>
        <span>{{ '单价 \t' + item.price }}</span>
        <span>{{ '数量 \t' + item.num }}</span>
      </li>
    </ul>
    <p>总价 {{ totalPrice }}</p>
  </div>
  <script type='text/javascript'>
    var vm = new Vue({
      el: '#app',
      data: {
        items: [{
          name: 'AJ',
          price: 2100,
          num: 2,
          checked: false
        }, {
          name: '361',
          price: 200,
          num: 3,
          checked: false
        }, {
          name: 'step',
          price: 99,
          num: 2,
          checked: false
        }, {
          name: 'Converse',
          price: 500,
          num: 1,
          checked: false
        }, {
          name: 'uniqlo',
          price: 100,
          num: 2,
          checked: false
        }, {
          name: 'HM',
          price: 88.8,
          num: 100,
          checked: false
        }],
        totalPrice: 0
      },
      methods: {
        check(item) {
          if(!item.checked) {
            this.totalPrice += Number(item.price * item.num);
          }else {
            this.totalPrice -= Number(item.price * item.num);
          }
        }
      },
    });
  </script>
</body>

</html>